<template>
	<view class="appVersion">
		<view class="information">当前版本<text>v{{currentVersion}}</text>，最新版本<text>v{{latestVersion}}</text></view>
		<view
			:class="downloadLatestVersionText=='下载最新版'?'update':'update-hover'"
			v-if="progressStatus"
			@click="clickUpgradeButton">{{downloadLatestVersionText}}</view>
		<view class="schedule" v-if="progressStatus">
			<view class="left">
				<view :style="'width:'+progressBarInitialization+'%;'"></view>
			</view>
			<view class="right">{{progressBarInitialization}}%</view>
		</view>
		<view v-if="changelog" class="log" v-html="changelog"></view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				currentVersion: "",//当前版本
				latestVersion: "",//最新版本
				progressStatus:false,//进度条显示
				progressBarInitialization:"0",//进度条初始化
				downloadLatestVersionText:"下载最新版",//按钮文字
				changelog:"",//升级日志
				downloadLink:"",//下载地址
			}
		},
		onLoad() {
			this.currentVersion = plus.runtime.version;
			uni.request({
				url: this.$_Url() + "/status.json",
				success: (res) => {
					this.latestVersion = res.data.client.mobile.android.version;
					this.downloadLink = res.data.client.mobile.android.downloads.apk;
					this.changelog = res.data.client.mobile.android.describe.default;
					if(this.currentVersion == this.latestVersion){
						this.progressStatus = false
					}else{
						this.progressStatus = true
					}
				}
			});
		},
		methods: {
			clickUpgradeButton() {
				this.downloadLatestVersionText = "下载中";
				const downloadTask = uni.downloadFile({
					url: this.downloadLink,
					success: (res) => {
						if (res.statusCode === 200) {
							let url = res.tempFilePath;
							uni.openDocument({
								filePath: url,
								success: (_res) => {
									
								}
							});
						}
					}
				});
				downloadTask.onProgressUpdate((res) => {
					this.progressBarInitialization = res.progress;
				});
			}
		},
	}
</script>

<style lang="scss">
.appVersion{
	view{
		font-size: 28rpx;
	}
	.information{
		text-align: center;
		margin: 25rpx 0 0 0;
		text{
			color: $LanSe;
		}
	}
	.update{
		width: 300rpx;
		height: 80rpx;
		background: $HuangSe;
		font-size: 28rpx;
		display: flex;
		align-items:center;
		justify-content:center;
		border-radius: 15rpx;
		margin: 25rpx auto auto auto;
	}
	.update-hover{
		width: 0;
		height: 0;
		overflow: hidden;
		margin: 0;
	}
	.schedule{
		margin: 25rpx 25rpx 0 25rpx;
		display: flex;
		align-items:center;
		.left{
			flex: 1;
			height: 50rpx;
			background: #FFF;
			border-radius: 100rpx;
			border: 1rpx solid #EBEEF5;
			overflow: hidden;
			view{
				height: 50rpx;
				background: #409EFF;
			}
		}
		.right{
			margin: 0 0 0 25rpx;
		}
	}
}
.log{
	padding-bottom: 25rpx;
	h2{
		font-size: 28rpx;
		line-height: 28rpx;
		padding: 20rpx 25rpx;
		background: #F5F7FA;
		border: 1rpx solid #EBEEF5;
		border-left: 10rpx solid #409EFF;
		margin-top: 25rpx;
		font-weight: normal;
	}
	p{
		margin: 25rpx 25rpx 0 25rpx;
		font-size: 28rpx;
	}
}
</style>